<template>
    <transition name="msgbox">
        <div v-if="show" class="msgbox-container" :class="className">
            <img src="../../assets/img/close.png" alt="" @click="successBtn" class="close">
            <div class="content-body" :class="status">
                <!--成功的弹框-->
                <img src="../../assets/img/ztipbg.png" alt="" v-if="status == 'success'">
                <!--失败的弹框-->
                <img src="../../assets/img/ftipbg.png" alt="" v-else-if="status == 'false'">
                <div>{{content}}</div>
                <a href="javascript:void(0);" @click="dolog('DoFalse',0)" v-if="status == 'false'">
                    <img src="../../assets/img/lqgd.png" alt="" class="lqgd">
                </a>

            </div>
        </div>
    </transition>
</template>

<script>
    export default {
        data () {
            return {
                show: false,
                title: '提示',
                content: '',
                confirm: '确定',
                cancel:'',
                className:'',
                status: ''
            }
        },
        watch:{
            show (val) {
                if (val) {
                    if(!this.hasClass(document.body,"pop-mask")){
                        this.addClass(document.body,"pop-mask");
                        this.addClass(document.body,this.status);
                    }
                }else{
                    this.removeClass(document.body,"pop-mask");
                    this.removeClass(document.body,this.status);
                }
            }
        },
        beforeMount () {
            //如果已经存在，则阻止出现第二次
            let node = document.querySelector('.msgbox-container')
            if (node && node.parentNode) {
                node.parentNode.removeChild(node)
            }
        },
        methods: {
            successBtn () {
                this.show = false;
            },
            cancelBtn () {
                this.show = false;
            },
            addClass(obj, cls){
                var obj_class = obj.className,
                    blank = (obj_class != '') ? ' ' : '';
                var added = obj_class + blank + cls;
                obj.className = added;
            },
            removeClass(obj, cls){
                var obj_class = ' '+obj.className+' ';
                obj_class = obj_class.replace(/(\s+)/gi, ' ');
                var removed = obj_class.replace(' '+cls+' ', ' ');
                removed = removed.replace(/(^\s+)|(\s+$)/g, '');
                obj.className = removed;//替换原来的 class.
            },
            hasClass(obj, cls){
                var obj_class = obj.className,
                    obj_class_lst = obj_class.split(/\s+/);
                var x = 0;
                for(x in obj_class_lst) {
                    if(obj_class_lst[x] == cls) {
                        return true;
                    }
                }
                return false;
            },
            dolog(name,index){
                let _this = this;
                let keyCode = 'index'+parseInt(index+1,10);
                let data1 = '[{"action": "ZeroBuy/'+name+'/ClickCount/","data": {'+keyCode+': 1,}}]';

                let data2 = eval('(' + data1 + ')');
                let jsonData = {
                    data: data2
                };
                let dologUrl=process.env.API_HOST+_this.$http.urlHead+'public_controller/doLogYhzxIndex?platcode='+_this.platcode;
                if(_this.route == 'fast')
                {
                	dologUrl=process.env.API_HOST+'/cYouHuiZhongXin/dolog.php';
                	
                	//let keyCode = 'index'+parseInt(index+1,10);
	                let uid = _this.getParamString("userId");
	                if (uid){
	                    jsonData.uid=uid;
	                    /*jsonData.platform_id=?;
	                    let data = {
	                        uid: uid,
	                        platform_id: _this.platcode,
	                        action: 'ZeroBuy/TimeStatus/ClickCount/',
	                        content: '点击',
	                        details: keyCode
	                    };*/
	                }
                }
                
                _this.$http.getAxio(1,dologUrl,'POST',jsonData).then(res => {
                    if (res.status == 0){
                        window.location.href = process.env.API_HOST+'/wxzspfse/?platcode=ZHWZ';
                    }
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .msgbox-container{
        position: fixed;
        top:0%;
        left:0%;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.5);
        color: #333;
        z-index: 999;
        transform:translate(0%,0%) scale(1, 1);
        .close{
            width: 60px;
            position: fixed;
            right: 12%;
            top: 400px;
            z-index: 1000;
        }
        .content-body{
            width: 90%;
            img{
                width: 92%;
                position: fixed;
                left: 4%;
                top: 160px;
            }
            div{
                width: 70%;
                position: fixed;
                left: 14%;
                top: 650px;
                font-size: 30px;
                color: #fff;
                text-align: center;
            }
            a{
                width: 50%;
                height: 80px;
                display: inline-block;
                position: fixed;
                left: 24%;
                top: 850px;
                .lqgd{
                    width: 50%;
                    position: fixed;
                    left: 24%;
                    top: 850px;
                }
            }
        }
        footer {
            width: 100%;
            text-align: center;
            display: block !important;
            border-width: 0;
            border-top: 1px solid #ccc;
            overflow: hidden;
            background: transparent;
            border-radius: 0 0 0.8rem 0.8rem;
            .button{
                float: left;
                padding: 1rem 0;
                width: 50%;
                color: #999;
                box-sizing: border-box;
                line-height: 3rem;
                font-size: 1.7rem;
                background: #f7f7f7;
                border-right: 1px solid #D5D7D6;
                text-decoration: none;
                -webkit-tap-highlight-color: transparent;
            }
            .button:first-child:nth-last-child(1) {
                width: 100%;
            }
            .button:first-child:nth-last-child(2) ~ .button {
                width: 50%;
            }
        }
    }
    .msgbox-enter,.msgbox-leave-to{
        -webkit-transform:  translate(0%,0%) scale(0,0);
    }
    .msgbox-enter-active,.msgbox-leave-active{
        -webkit-transition: all .3s;
        transition: all .3s;
    }
    .msgbox-enter-to,.msgbox-leave{
        -webkit-transform:  translate(0%,0%) scale(1,1);
    }
</style>